<template>
    <div class="home-banner">
        <XtxCarousel :sliders="sliders"></XtxCarousel>
    </div>
</template>


<script>
import XtxCarousel from '@/components/library/XtxCarousel.vue'
import { ref } from 'vue'
import { findBanner } from '@/api/home'
export default {
  name: 'HomeBanner',
  components: { XtxCarousel },
  setup(){
    const sliders = ref([])
    // findBanner().then(data=>{
    //   sliders.value = data.result
    //   console.log("this is banner", data.result);
    // })

    const Banner = async ()=>{
      const {data:{result}} = await findBanner()
      sliders.value = result
      console.log("this is banner", result);
    }
    Banner()

    return {
      sliders,
      Banner,
    }
  }
}
</script>


<style lang="less" scoped>
.home-banner {
    width: 1240px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98
}
.xtx-carousel {
  ::v-global(.carousel-btn.prev) {
    left: 270px;
  }
  ::v-global(.carousel-indicator) {
    padding-left: 250px;
  }
}
</style>